<script >

/**
 * 滚动条组件
 */
export default {
  props: {
    list: {
      default: [
        "0.012",
        "0.02",
      ]
    },
    active: {
      default: 0
    },
    lineLeft: {
      default: false
    }
  },
  data () {
    return {
      isTouchDown: false,
      editL: 0,
      preScrollY: 0,
      offset: 100 / this.list.length
    }
  },
  computed: {
    getTransform () {
      if (this.isTouchDown) {
        return `translateY(${-this.editL}%)`
      } else {
        let l = (this.active - 8) * this.offset
        return `translateY(${-l}%)`
      }
    },
    getransition () {
      if (this.isTouchDown) {
        return "0s"
      }
      return "0.5s"
    },
    isActive () {
      return (index) => {
        if (this.isTouchDown) {
          return this.getLocalActive() == index
        } else {
          return this.active == index
        }
      }
    }
  },
  methods: {
    itemClick (index, item) {
      this.$emit("itemClick", index, item)
    },
    touchmove (e) {
      if (!this.isTouchDown) {
        this.isTouchDown = true
        this.editL = ((this.active - 8) * this.offset)
        this.preScrollY = e.touches[0].clientY
      } else {
        this.editL -= (e.touches[0].clientY - this.preScrollY) / 2
        this.preScrollY = e.touches[0].clientY
      }
    },
    touchcancel (e) {

      let index = this.getLocalActive()
      this.isTouchDown = false
      this.$emit("itemClick", index, this.list[index])
    },
    getLocalActive () {
      if (!this.isTouchDown) {
        return this.active
      }
      let index = Math.round(this.editL / this.offset + 8)
      if (index < 0) {
        index = 0
      } else if (index > this.list.length - 1) {
        index = this.list.length - 1
      }
      return index
    }
  }
}
</script>

<template>
  <view class="seek-bar">
    <view class="seek-bar-list">
      <ul
        @touchmove="touchmove"
        @touchend="touchcancel"
        :style="{
          transform: getTransform,
          transition: getransition,
        }"
      >
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="isActive(index) ? 'item-active' : ''"
        >
          {{ item }}
        </li>
      </ul>
    </view>
    <view :class="lineLeft ? 'seek-bar-line-left' : 'seek-bar-line'"></view>
    <!-- <view
      :class="lineLeft ? 'seek-bar-active-line-left' : 'seek-bar-active-line'"
    ></view> -->
  </view>
</template>

<style scoped>
.seek-bar {
  height: 100%;
  position: relative;
  display: inline-block;
}

.seek-bar-list {
  height: 50vh;
  display: inline-block;
  scrollbar-width: none;
  overflow: hidden;
}

.seek-bar-list ul {
  transition: 0.5s;
  transform: translateY(4.5vw);
}

.seek-bar-list ul li {
  padding: 0 1vw;
  color: rgba(16, 16, 16, 1);
  font-size: 2.8vw;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  transition: 0.5s;
}

.seek-bar-list .item-active {
  transform: scale(1.4);
  color: #81b337;
}

.seek-bar-line {
  top: 0;
  right: -2.5vw;
  width: 0.6vw;
  height: 100%;
  position: absolute;
  background-color: #bbbbbb;
}

.seek-bar-active-line {
  top: 50%;
  right: -1.8vw;
  transform: translateY(-50%);
  width: 0.8vw;
  height: 5%;
  position: absolute;
  background-color: #81b337;
}

.seek-bar-line-left {
  top: 0;
  left: -2.5vw;
  width: 0.6vw;
  height: 100%;
  position: absolute;
  background-color: #bbbbbb;
}

.seek-bar-active-line-left {
  top: 50%;
  left: -1.8vw;
  transform: translateY(-50%);
  width: 0.8vw;
  height: 5%;
  position: absolute;
  background-color: #81b337;
}
</style>
